<template>
  <div class="wrap">
    <img src="@/assets/login-icon.png">
    <input type="text" placeholder="请输入账号" v-model="data.username">
    <input type="password" placeholder="请输入密码" v-model="data.password"> 
    <div class="loginbtn" @click="login">登录</div>
    <!-- router-link是用a标签实现的，可以用a来写样式 -->
    <p><router-link to="register">立即注册</router-link></p> 
  </div>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'  
const Login=()=>{
  const router = useRouter()
  // 定义了data数据，reactive存储可以响应的数据
  const data = reactive({username:'',password:''}) 
  const login = async ()=>{
    // 非空验证
    if(!data.username||!data.password){
      alert("请输入完整信息")
    }
    const res=await axios({
      method:'post',
      url:"http://localhost:8888/users/login",
      data:'username='+data.username+'&password='+data.password,
      headers:{"Content-Type":'application/x-www-form-urlencoded'}
    })
    // 登录成功
    if (res.data.code === 1) {
      // 登录状态的记录
      localStorage.islogin = true
      localStorage.token = res.data.token
      localStorage.userid = res.data.user.id
      // 跳转首页
      router.push("/")
    }
    if (res.data.code===0) {
      alert(res.data.message)
    }
  }
  return {login,data}
}
export default {
  name:"LoginView",
  setup() {
     const {login,data} =Login()
     return {login,data}
  }
}
</script>
<style scoped lang="scss">
.wrap {
  width: 2.95rem;
  height: 5rem;
  padding-top: 1.6rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: .66rem;
    height: .66rem;
  }
  input {
    width: 100%;
    height: .48rem;
    border: .02rem solid rgb(232, 230, 230);
    margin-top: .16rem;
    font-size: .16rem;
    color: #555;
    border-radius: .05rem;
    text-indent: .2rem;
  }
  p {
    margin-top: .15rem;
    a{
      color: #888;
       font-size: .14rem;
       text-decoration: none;
      }
  }
  .loginbtn{
      width: 100%;
      height: .48rem;
      margin-top: .2rem;
      color:  #222;
      background-color: #ffcc00;
      text-align: center;
      font-size: .16rem;
      line-height: .48rem;
    }
}
</style>